import { useRef, useEffect, type CSSProperties } from 'react';
// 引入 Echarts 的各种图表组件和组件配置,后续备用
import 'echarts/lib/chart/line'; // 折线图
import 'echarts/lib/chart/bar'; // 柱状图
import 'echarts/lib/chart/pie'; // 饼图
import 'echarts/lib/chart/map'; // 地图
import 'echarts/lib/chart/scatter'; // 散点图
import 'echarts/lib/component/tooltip'; // 提示框组件
import 'echarts/lib/component/title'; // 标题组件
import 'echarts/lib/component/legend'; // 图例组件
import 'echarts/lib/component/markLine'; // 标线组件
import 'echarts/lib/component/dataZoom'; // 数据区域缩放组件
import 'echarts/lib/component/visualMap'; // 视觉映射组件
// 引入 Echarts 的类型声明
import * as echarts from 'echarts';
import type { ECharts, EChartsOption } from 'echarts';
import type { CallbackDataParams } from 'echarts/types/src/util/types.d.ts';
// 引入自定义的钩子函数和公共函数
import { useWindowResize, usePrevious } from '../../hooks/index';
import { isDeepEqual } from '../../utils/index';
/**
 * 公共 Echarts 业务灵巧组件，可在项目中重复使用
 *
 * @param {Object} props - 组件属性
 * @param {EChartOption} props.option - Echarts 配置项
 * @param {Function} [props.onClick] - 点击事件处理函数
 * @param {boolean} [props.notMerge=false] - 是否不合并数据
 * @param {boolean} [props.lazyUpdate=false] - 是否懒渲染
 * @param {CSSProperties} [props.style] - 组件样式
 * @param {string} [props.className] - 组件类名
 * @returns {JSX.Element} - React 组件
 */
type Props = {
  option?: EChartsOption;
  onClick?: (param: CallbackDataParams) => void;
  notMerge?: boolean;
  lazyUpdate?: boolean;
  style?: CSSProperties;
  className?: string;
};
const CommonChart = (props: Props) => {
  // 解构属性，并设置默认值
  const {
    option,
    onClick, // 点击事件处理函数
    notMerge = false, // 是否不合并数据，默认为 false
    lazyUpdate = false, // 是否懒渲染，默认为 false
    style, // 组件样式
    className = '', // 组件类名，默认为空字符串
  } = props;
  // 创建 ref 来引用 div 元素，并初始化 chartInstanceRef 为 null
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstanceRef = useRef<ECharts | null>(null);
  // 使用 usePrevious 钩子函数来记录上一次的 option 和 onClick 值
  const prevOption = usePrevious(option);
  const prevClickEvent = usePrevious(onClick);

  useEffect(() => {
    // 定义一个变量来存储图表实例
    let chartInstance: ECharts | null = null;
    if (chartRef.current) {
      // 如果图表实例不存在，则初始化
      if (!chartInstanceRef.current) {
        const hasRenderInstance = echarts.getInstanceByDom(chartRef.current);
        if (hasRenderInstance) {
          hasRenderInstance.dispose();
        }
        chartInstanceRef.current = echarts.init(chartRef.current);
      }
      // 暂存当前的图表实例
      chartInstance = chartInstanceRef.current;
      // 如果 option 或 onClick 值发生变化，则重新渲染
      try {
        if (!isDeepEqual(prevOption, option, ['formatter'])) {
          // console.log('窗口大小变化，重新渲染图表', style);
          chartInstance.setOption(option, { notMerge, lazyUpdate });
        }
        if (onClick && typeof onClick === 'function' && onClick !== prevClickEvent) {
          chartInstance.on('click', onClick);
        }
        chartInstanceRef.current?.resize();
      } catch (error) {
        // 使用 error 变量，例如打印错误信息
        console.error('图表处理出错:', error);
        // 确保这是一个函数调用而非单纯的表达式
        if (chartInstance) chartInstance.dispose();
      }
    }
  }, [option, onClick, notMerge, lazyUpdate, prevOption, prevClickEvent]);
  // 监听窗口大小变化，当窗口大小变化时，重新渲染图表
  useWindowResize(() => {
    if (chartInstanceRef.current) {
      chartInstanceRef.current?.resize();
    }
  });
  return <div style={{ ...style, padding: 20 }} className={className} ref={chartRef}></div>;
};

export default CommonChart;
